<template>
  <div
    style="
      width: 25%;
      background-color: #f2f3f5;
      display: flex;
      flex-direction: column;
      padding: 20px 20px;
      border-radius: 10px;
      margin: 30px 0px;
    "
  >
    <div style="margin-bottom: 25px; display: flex">
      <input placeholder="作者" class="input-search" type="text" />
      <el-button type="primary" icon="el-icon-search"></el-button>
    </div>
    <div style="margin-bottom: 10px; display: flex">
      <input placeholder="关键字" class="input-search" type="text" />
      <el-button type="primary" icon="el-icon-search"></el-button>
    </div>
    <el-divider>选择日期</el-divider>
    <div class="block">
      <el-date-picker
        style="width: 100%"
        v-model="date_string"
        value-format="yyyyMMdd"
        type="daterange"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
      >
      </el-date-picker>
    </div>
    <el-button @click="startFind" style="margin-top: 25px" type="primary"
      >检索</el-button
    >
    <el-button
      @click="openNotify"
      style="margin-top: 25px; margin-left: 0px"
      type="info"
      >重置</el-button
    >
  </div>
</template>

<script>
export default {
  name: "Search",
  data: function () {
    return {
      input1: null,
      date_string: "",
      date_obj: {
        start: {
          year: "",
          mouth: "",
          day: "",
        },
        end: {
          year: "",
          mouth: "",
          day: "",
        },
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  methods: {
    openNotify() {
      this.$notify({
        title: "重置成功",
        type: "success",
        duration: 3000,
        position: "bottom-right",
      });
    },
    startFind() {
      this.date_obj.start.year = this.date_string[0].slice(0, 4);
      this.date_obj.start.mouth = this.date_string[0].slice(4, 6);
      this.date_obj.start.day = this.date_string[0].slice(6, 8);
      this.date_obj.end.year = this.date_string[1].slice(0, 4);
      this.date_obj.end.mouth = this.date_string[1].slice(4, 6);
      this.date_obj.end.day = this.date_string[1].slice(6, 8);
      this.$EventBus.$emit("changeAchievementListShow", this.date_obj);
    },
  },
};
</script>

<style>
.input-search {
  width: 100% !important;
  background-color: white !important;
  color: black !important;
}
</style>